<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7-逐帧动画效果</title>
    <style>
        .box{
            margin: 30px auto;
            /* 整个精灵图宽度1680，12个小人动作，所以拆分12份，每份宽高是140px*/
            width:140px;
            height:140px;
            border:1px solid red;
            background: url(images/bg.png);
            /* infinite 持续不断 */
            /* steps(12)逐帧 */
            animation: move .8s steps(12) infinite;
        }
        @keyframes move{
            from{
               background-position: 0 0;
            }
            to{
               background-position: -1680px 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>